@using AntDesign.Charts
@using Title = AntDesign.Charts.Title
@inject NavigationManager NavigationManager
@inject HttpClient HttpClient

<Tabs ActiveKeyChanged="OnTabChanged">
    <TabPane Key="1">
        <TabTemplate>示例1</TabTemplate>
        <ChildContent>
            <Line @ref="@chart1" Config="config1" Data="data1" />
        </ChildContent>
    </TabPane>

    <TabPane Key="2">
        <TabTemplate>示例2</TabTemplate>
        <ChildContent>
            <Line Config="config2" Data="data2" />
        </ChildContent>
    </TabPane>

    <TabPane Key="3">
        <TabTemplate>示例3</TabTemplate>
        <ChildContent>
            <Line @ref="@chart3" Config="config3" Data="data3" />
        </ChildContent>
    </TabPane>

    <TabPane Key="4">
        <TabTemplate>示例4</TabTemplate>
        <ChildContent>
            <Line @ref="@chart4" Config="config4" Data="data4" />
        </ChildContent>
    </TabPane>
</Tabs>

@code {
    IChartComponent chart1;
    IChartComponent chart2;
    IChartComponent chart3;
    IChartComponent chart4;
    FireworksSalesItem[] data1;

    SalesItem[] data3;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        OnTabChanged("1");
    }

    private async Task OnTabChanged(string activeKey)
    {
        if (activeKey == "1")
        {
            data1 = await ChartsDemoData.FireworksSalesAsync(NavigationManager, HttpClient);
            await chart1.ChangeData(data1);
        }
        else if (activeKey == "3")
        {
            data3 = await ChartsDemoData.SalesAsync(NavigationManager, HttpClient);
            await chart3.ChangeData(data3);
        }
    }

    #region 示例1

    readonly LineConfig config1 = new LineConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "单阶梯折线的基础用法"
        },
        Description = new Description
        {
            Visible = true,
            Text = "最基础简单的阶梯图使用方式，显示一个指标的趋势和变化"
        },
        StepType = LineConfig.StepTypeHV,
        Padding = "auto",
        XField = "Date",
        YField = "scales",
    };

    #endregion 示例1

    #region 示例2

    readonly object[] data2 = new object[]
    {
new { year = "1991", value = 3 },
new { year = "1992", value = 4 },
new { year = "1993", value = 3.5 },
new { year = "1994", value = 5 },
new { year = "1995", value = 4.9 },
new { year = "1996", value = 6 },
new { year = "1997", value = 7 },
new { year = "1998", value = 9 },
new { year = "1999", value = 13 },
    };


    readonly LineConfig config2 = new LineConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "配置折线数据点样式"
        },
        Description = new Description
        {
            Visible = true,
            Text = "自定义配置趋势线上数据点的样式"
        },
        Padding = "auto",
        ForceFit = true,
        XField = "year",
        YField = "value",
        Label = new Label
        {
            Visible = true,
            Type = "point"
        },
        Point = new LineViewConfigPoint
        {
            Visible = true,
            Size = 5,
            Shape = "diamond",
            Style = new GraphicStyle
            {
                Fill = "white",
                Stroke = "#2593fc",
                LineWidth = 2,
            }
        },
    };

    #endregion 示例2

    #region 示例3

    readonly LineConfig config3 = new LineConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "为阶梯图添加缩略轴交互"
        },
        Description = new Description
        {
            Visible = true,
            Text = "缩略轴 (slider) 交互适用于数据较多，用户希望关注数据集中某个特殊区间的场景。"
        },
        ForceFit = true,
        Padding = "auto",
        XField = "城市",
        StepType = LineConfig.StepTypeHVH,
        XAxis = new ValueCatTimeAxis
        {
            Visible = true,
            Label = new BaseAxisLabel
            {
                Visible = true,
                AutoHide = true,
            },
        },
        YField = "销售额",
        YAxis = new ValueAxis
        {
            Label = new BaseAxisLabel
            {

            }
        },
        Interactions = new Interaction[]
    {
new Interaction
{
Type = "slider",
Cfg = new
{
start= 0.1,
end= 0.2,
}
}
    }
    };

    #endregion 示例3

    #region 示例4

    readonly object[] data4 = new object[]
    {
new { year = "1991", value = 3 },
new { year = "1992", value = 4 },
new { year = "1993", value = 3.5 },
new { year = "1994", value = 5 },
new { year = "1995", value = 4.9 },
new { year = "1996", value = 6 },
new { year = "1997", value = 7 },
new { year = "1998", value = 9 },
new { year = "1999", value = 13 },
    };

    readonly LineConfig config4 = new LineConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "带数据点的折线图"
        },
        Description = new Description
        {
            Visible = true,
            Text = "将折线图上的每一个数据点显示出来，作为辅助阅读。"
        },
        ForceFit = true,
        Padding = "auto",
        XField = "year",
        YField = "value",
        StepType = LineConfig.StepTypeHVH, // 可以选择 hv, vh, hvh, vhv
        Point = new LineViewConfigPoint
        {
            Visible = true,
        },
        Label = new Label
        {
            Visible = true,
            Type = "point"
        },

    };

    #endregion 示例4

}